<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import type { QuestionItem, QuestionSection } from '#/types/question';
import { RADIO, CHECKBOX, TRUE_FALSE, FILL_BLANK, ESSAY } from '#/views/manage/modules/const';
import RadioQuestion from '#/views/exam/modules/components/radio-question.vue';
import CheckboxQuestion from '#/views/exam/modules/components/checkbox-question.vue';
import TrueFalseQuestion from '#/views/exam/modules/components/true-false-question.vue';
import FillBlankQuestion from '#/views/exam/modules/components/fill-blank-question.vue';
import EssayQuestion from '#/views/exam/modules/components/essay-question.vue';
import { QUESTION_STATUS } from '#/views/exam/const';
import { useRoute, useRouter } from 'vue-router';
import { markExamDoubtfulAnswerForUserApi } from '#/api/manage/examination-mgr';

const route = useRoute();

const examScoreId = route.params.id;
interface Props {
  question: QuestionSection[];
}
const props = withDefaults(defineProps<Props>(), {
  question: () => [],
});

defineOptions({
  name: 'Question',
});
const emit = defineEmits<{
  submit: [submit: boolean];
}>();

// 组件映射
const componentMap = {
  [RADIO]: RadioQuestion,
  [CHECKBOX]: CheckboxQuestion,
  [TRUE_FALSE]: TrueFalseQuestion,
  [FILL_BLANK]: FillBlankQuestion,
  [ESSAY]: EssayQuestion,
};

// 处理题目状态更新
const handleUpdateStatus = (
  questionItem: QuestionItem,
  status: typeof QUESTION_STATUS.ANSWERED | typeof QUESTION_STATUS.UNANSWERED | typeof QUESTION_STATUS.MARKED,
  isMarked?: boolean
) => {
  // 更新对应的题目状态
  props.question.forEach((section) => {
    const question = section.questions.find(q => q.id === questionItem.id);
    if (question) {
      question.status = isMarked ? QUESTION_STATUS.MARKED : status;
    }
  });

  markExamDoubtfulAnswerForUserApi({
    examScoreId,
    questionId: questionItem.id,
    type: isMarked ? 'add' : 'remove'//add/remove
  }).then(res => {
    console.log('res', res);
  });
};

// 处理答案更新
const handleUpdateAnswer = (questionId: string | number, answer: string | string[]) => {
  // 更新对应的题目答案
  props.question.forEach((section) => {
    const question = section.questions.find(q => q.id === questionId);
    if (question) {
      question.answer = answer;
    }
  });
  emit('submit', false);
};

// 获取组件类型
const getComponent = (sectionType: string) => {
  return componentMap[sectionType as keyof typeof componentMap] || 'div';
};
</script>

<template>
  <div class="question-container">
    <!-- 所有题目内容 -->
    <div class="question-content">
      <div v-if="props.question.length > 0" class="questions-list">
        <div v-for="(item, index) in props.question" :key="index">
          <div class="question-section">
            <span class="text-sm font-medium">{{ item.title }}</span> <span class="text-[12px]">{{ item.description
            }}</span>
          </div>
          <component :is="getComponent(item.type as string)" v-for="(question, index) in item.questions"
            :question="question" :key="question.id" :question-index="question.index || 0"
            @update-status="handleUpdateStatus" @update-answer="handleUpdateAnswer"
            class="border-b border-gray-200 pl-4 mb-4" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.question-container {
  background: #fff;
  border-radius: 8px;
  /* padding: 16px; */
}

.questions-list {
  /* padding-bottom: 20px; 底部留白 */
}

.question-section {
  margin-bottom: 16px;
}
</style>
